<template>
  <div class="comment-list mb-40 p-0-16">
    <div class="total mb-16">
      <div class="point mr-8"></div>
      <p class="title">{{ $t('all_comments') }} ({{ totalNum }})</p>
    </div>
    <div v-if="stateObj.empty" class="empty">
      <img
        class="no-comment mb-8"
        src="@/assets/images/no-comment.png"
        alt=""
      />
      <p class="text">{{ $t('no_comment') }}</p>
    </div>

    <div v-for="(item, index) in listData" :key="index" class="level">
      <t-avatar class="head-img mr-12" :src="item.headImg" />
      <div class="content">
        <div class="info mb-8">
          <p class="nickname mr-4">{{ item.nickName }}</p>
          <icon v-if="item.is_bigv" name="ic_big_v_yellow mr-4" size="12px" />
          <p class="time">· {{ item.reviewTime | duration }}</p>
        </div>
        <p class="title mb-12 ov-2">{{ item.reviewContent }}</p>

        <div
          v-if="item.subList && item.subList.length > 0 && !openObj[item.id]"
          class="cursor-pointer check-sub"
          @click="checkSub(item.id)"
        >
          {{$t('view_all_replies')}}( {{ item.subList.length }} )
        </div>
        <div v-if="openObj[item.id] && item.subList && item.subList.length > 0">
          <div
            v-for="(subItem, i) in item.subList"
            :key="i"
            class="level level2"
          >
            <t-avatar class="head-img mr-12" :src="subItem.headImg" />
            <div class="content">
              <div class="info mb-8">
                <p class="nickname mr-4">{{ subItem.nickName }}</p>
                <icon
                  v-if="subItem.is_bigv"
                  name="ic_big_v_yellow mr-4"
                  size="12px"
                />
                <p class="time">· {{ subItem.reviewTime | duration }}</p>
              </div>
              <p class="title ov-2 mb-16">{{ subItem.reviewContent }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div v-if="total > 0" class="block">
      <pagination
        :current-page.sync="listQuery.pageNum"
        :page-size="listQuery.pageSize"
        layout="prev, pager, next, jumper"
        :total="total"
        @size-change="val => handlePageChange(val, 'pageSize')"
        @current-change="val => handlePageChange(val, 'pageNum')"
      ></pagination>
    </div>
  </div>
</template>

<script>
import { Pagination } from 'element-ui';
import TAvatar from './TAvatar.vue';
import 'element-ui/lib/theme-chalk/index.css';

export default {
  name: 'CommentPage',

  components: { TAvatar, Pagination },

  props: {
    obj: {
      type: Object,
      default: () => {}
    }
  },

  data() {
    return {
      openObj: {},
      stateObj: {
        error: false,
        empty: false
      },
      listData: [],
      total: 0,
      totalNum: 0,
      listQuery: {
        pageNum: 1,
        pageSize: 15
      }
    };
  },

  computed: {
    query() {
      const { news_id, news_type } = this.obj;
      return {
        newsType: news_type,
        newsId: news_id
      };
    }
  },

  created() {
    this.search();
  },
  methods: {
    search() {
      this.listQuery.pageNum = 1;
      this.getList();
    },

    async getList() {
      try {
        const { list, total, pages } = await this.$API.reviewGetReviewList({
          newsId: this.query.newsId,
          ...this.listQuery
        });
        this.listData = list || [];
        this.total = total === 0 ? 0 : Number(pages) * this.listQuery.pageSize || 0;
        this.totalNum = total;

        if (list.length === 0 && this.listQuery.pageNum === 1) {
          this.stateObj.empty = true;
        }
      } catch (e) { 
        
      }
    
    },

    handlePageChange(val, key) {
      this.listQuery[key] = val;
      this.getList();
    },

    checkSub(id) {
      this.$set(this.openObj, [id], id);
    }
  }
};
</script>

<style lang="scss" scoped>
.total {
  display: flex;
  height: 32px;
  align-items: center;

  .point {
    width: 4px;
    height: 16px;
    background: #fa4646;
    border-radius: 2px;
  }

  .title {
    font-size: 20px;
    color: #0c0c1c;
    letter-spacing: 0;
    line-height: 32px;
  }
}

.empty {
  margin: 40px auto;
  text-align: center;

  .no-comment {
    width: 96px;
    height: 96px;
    margin: 0 auto 8px;
  }

  .text {
    color: rgba(12, 12, 28, 0.7);
    letter-spacing: 0;
    text-align: center;
    line-height: 20px;
  }
}

.level {
  display: flex;
  padding-top: 16px;

  .head-img {
    border: 0.5px solid rgba(42, 60, 88, 0.1);
    border-radius: 100px;
    width: 32px;
    height: 32px;
  }

  .content {
    .info {
      display: flex;
      align-items: center;
      height: 18px;

      .nickname {
        font-size: 13px;
        color: rgba(12, 12, 28, 0.7);
        letter-spacing: 0;
        line-height: 18px;
      }

      .time {
        font-size: 12px;
        color: rgba(12, 12, 28, 0.5);
      }
    }

    .title {
      font-size: 16px;
      color: #0c0c1c;
      letter-spacing: 0;
      line-height: 24px;
    }

    .check-sub {
      font-size: 14px;
      color: #1a88ee;
      letter-spacing: 0;
      line-height: 20px;
      font-weight: 500;
    }
  }
}

.block {
  border-top: 1px solid rgba(12, 12, 28, 0.08);
  margin: 16px 0;
  padding-top: 16px;
}

.comment-list ::v-deep .el-pager li.active {
  color: #fa4646;
}
.comment-list ::v-deep .el-pagination__jump {
  float: right;
}
.comment-list ::v-deep .el-pagination__editor > .el-input__inner {
  height: 24px;
  background: rgba(12, 12, 28, 0.08);
  border-radius: 8px;
  color: #0c0c1c;
}

.comment-list ::v-deep .el-pager {
  .number {
    width: 24px;
    min-width: 24px;
    height: 24px;
    padding: 0;
    font-size: 12px;
    color: rgba(42, 60, 88, 0.7);
    text-align: center;
    line-height: 24px;
    background: rgba(12, 12, 28, 0.08);
    border-radius: 8px;
    margin: 2px 4px;
  }

  .active {
    background: rgba(250, 70, 70, 0.2);
    color: #fa4646;
  }
}
</style>
